<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
       
       .box
       {
          box-sizing: border-box;
          width: 500px;
         background-color: #000;
         overflow: hidden;
       }

        .picture-list
        {
            display: flex;
            width: 500px;
            height: 270px;
            /* overflow: hidden; */
        }

        .picture-list .item{
            flex-shrink: 0;
           width: 500px;
           height: 270px;
           vertical-align: middle;
        }

        .option
        {
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            width: 500px;
            font-size: 12px;
            height: 40px;
            color: #f5f5f5;
            
        }

        .option span{

            display:flex;
             flex: 1;
            justify-content: center;
            align-items: center;
            height: 40px;
            
        }

        .active
        {
            color:gold;
            background-color:rgba(235, 235,235, 0.5);
        }

        .option span:hover
        {
            cursor: pointer;
            color:gold;
            background-color:rgba(235, 235,235, 0.5);
        }
     
         
    </style>

</head>
<body>

    <div class="box">
        <div class="picture-list">
           <img src="./image/01.jpg" alt="" class="item">
           <img src="./image/02.jpg" alt="" class="item">
           <img src="./image/03.jpg" alt="" class="item">
           <img src="./image/04.jpg" alt="" class="item">
           <img src="./image/05.jpg" alt="" class="item">
        </div>
        <div class="option">
            <span class="active">桑启的旅途故事</span>
            <span>启示之音抢先听</span>
            <span>谁成为版本之子</span>
            <span>观赛体验升级</span>
            <span>季后赛开战</span>
        </div>
    </div>

    <script>
        // 点击事件设置
        var spanEls = document.querySelectorAll("span");
        // console.log(spanEls);
        //给每一个span元素添加上点击事件
        var activeSpan = document.querySelector(".active");

        //找到图片列表
        var imgListEl = document.querySelector(".picture-list");

        var currentIndex = 0;
        
        //定义步数
        var step = 1;

        //设置自动连播
        var  interId = null;

        function Interval()
        {
             //设置自动轮播
            interId =  setInterval( function(){
             currentIndex+=step;
             if(currentIndex == spanEls.length)
             {
                step = -1;
                currentIndex+=step;
             }
             else if(currentIndex == -1)
             {
                step = 1;
                currentIndex+=step;
             }
             imgListEl.style.transform = `translateX(${currentIndex*-500}px)`
             //下面的样式也要改变
             activeSpan.classList.remove("active");
             spanEls[currentIndex].classList.add("active");
             activeSpan = spanEls[currentIndex];

            }, 3000);
        }

        Interval();
       
        for(item of spanEls)
        {  
           item.onmouseenter = function()
           { 
               //暂停连播
                clearInterval(interId);
              
                //实现字体样式转换
                // console.log(this);
                activeSpan.classList.remove("active");
                this.classList.add("active");
                activeSpan = this;
                //实现图片轮播
                 
                //找到下标:类数组结构
                // console.log(spanEls.length);
                for(let i = 0;i<spanEls.length;i++)
                {
                    // console.log(i);
                    if(spanEls[i] === this)
                    {
                        currentIndex = i;
                        break;
                    }
                }
                
                imgListEl.style.transition = "all .3s ease"
                imgListEl.style.transform = `translateX(${currentIndex*-500}px)`
           }

            item.onmouseleave = function()
            {
                Interval();
            }
        }
    </script>
    
</body>
</html>